<template>
  <div>
    <mk-mast
      :storeCompanyMast="storeCompanyMast"
      :productCompanyMast="productCompanyMast"
      :storeCoreMast="storeCoreMast"
      :productCoreMast="productCoreMast"
      :dateShow="dateShow"
      v-model:dateType="dateType"
      v-model:dateValue="dateValue"
      :storeShow="storeShow"
      v-model:storeType="storeType"
      v-model:storeValue="storeValue"
      :productShow="productShow"
      v-model:productTypeOne="productTypeOne"
      v-model:productValueOne="productValueOne"
      :buttonSize="buttonSize"
      :companyMulti="companyMulti"
    />
    <section>
      <span>日期类型：</span>
      <select v-model="myType">
        <option value="month">月</option>
        <option value="week">周</option>
        <option value="day">日</option>
      </select>
      <span>选择日期：</span>
      <input type="text" v-model="mydateValue" />
      <my-date
        style="display: inline-block"
        :type="myType"
        :min="'20170112'"
        :max="'20221121'"
        :weekInfo="weekInfo"
        v-model:value="mydateValue"
      />
      <span>{{ mydateValue }}</span>
    </section>
    <section>
      <span>期间选择:</span>
      <mk-date-range
        :className="'form-control'"
        :styleName="''"
        :type="dateRangeType"
        :min="'20180515'"
        :max="'20240719'"
        :weekInfo="weekInfo"
        v-model:value="dateRange"
      />
      <mk-date-range
        :type="'week'"
        :min="'20180515'"
        :max="'20240719'"
        :weekInfo="weekInfo"
        v-model:value="weekRange"
      />
      <mk-date-range
        :type="'month'"
        :min="'20180515'"
        :max="'20240719'"
        :weekInfo="weekInfo"
        v-model:value="monthRange"
      />
    </section>
  </div>
</template>
<script>
import { ref } from '@vue/reactivity';
export default {
  name: 'mastExample',
  data() {
    return {
      // mydateValue: '202110',
      weekInfo: {
        2016: '20151228',
        2017: '20170102',
        2018: '20180101',
        2019: '20181231',
        2020: '20191230',
        2021: '20201228',
        2022: '20211227'
      },
      //期间间隔
      dateRangeType: 'day',
      dateRange: ['20210901', '20220501'],
      weekRange: ['202148', '202205'],
      monthRange: ['202010','202103'],
      //mast数据
      buttonSize: '20px',
      dateCompanyMast: [],
      storeCompanyMast: [
        { label: ' 企业数据1', id: '1' },
        { label: ' 企业数据2', id: '2' }
      ],
      productCompanyMast: [
        { label: ' 企业数据1', id: '1' },
        { label: ' 企业数据2', id: '2' }
      ],
      dateCoreMast: [],
      storeCoreMast: [
        { label: ' 自社数据1', id: '1' },
        { label: ' 自社数据2', id: '2' }
      ],
      productCoreMast: [
        { label: ' 自社数据1', id: '1' },
        { label: ' 自社数据2', id: '2' }
      ],

      dateShow: true,
      dateType: 'company',
      dateValue: '20211014',
      storeShow: true,
      storeType: 'company',
      storeValue: '1',
      productShow: [true, false],
      productTypeOne: 'company',
      productValueOne: '1',
      companyMulti: true
    };
  }
};
</script>
<script setup>
const myType = ref('month');
const mydateValue = ref('202110');
</script>
